import { saveCuesSubmit } from '@/services/api/api-cues-submit';
import { DrawerForm } from '@ant-design/pro-form';
import { useModel } from '@umijs/max';
import {
  Descriptions,
  Divider,
  Image,
  message,
  Modal,
  Space,
  Spin,
  Tag,
  Typography,
  Upload,
  UploadFile,
} from 'antd';
import React, { useState } from 'react';
import { useAccess } from 'umi';

interface AddSubmitPreviewProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  details: CuesSubmitBo.AddSubmitPreview | undefined;
  // onOpen: () => CuesSubmitBo.AddSubmitPreview;
  onSubmit: () => void;
}

const AddSubmitPreview: React.FC<AddSubmitPreviewProps> = ({
  open,
  onOpenChange,
  details,
  onSubmit,
}) => {
  const access = useAccess();
  const { initialState, setInitialState } = useModel('@@initialState');

  // const [details, setDetailsState] = useState<CuesSubmitBo.AddSubmitPreview>();

  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');

  const handleCancel = () => setPreviewOpen(false);

  const handlePreview = async (file: UploadFile) => {
    setPreviewTitle(file.name);
    setPreviewImage(file.url);
    setPreviewOpen(true);
  };

  return (
    <DrawerForm
      key="drawer_form_add_submit_preview"
      title={details?.articleName}
      drawerProps={{
        // maskClosable: false,
        destroyOnClose: true,
      }}
      // trigger={
      //   <Button key="button_add_submit_preview" type="primary">
      //     <FileSearchOutlined /> 预览
      //   </Button>
      // }
      open={open}
      onOpenChange={(visible) => {
        onOpenChange(visible);
      }}
      submitter={{
        searchConfig: {
          submitText: '提交',
        },
        submitButtonProps: {
          style: {
            background: '#87d068',
          },
        },
      }}
      onFinish={async (values) => {
        let articleAttachments = [];

        if (details?.articleAttachments !== undefined && details?.articleAttachments.length > 0) {
          articleAttachments = details?.articleAttachments
            .filter((item: { status: string }) => {
              return item.status === 'done';
            })
            .map((item: { response: { data: { id: any } } }) => {
              return item.response.data.id;
            });
        }


        const response = await saveCuesSubmit({
          topicId: details?.topicId,
          articleName: details?.articleName,
          articleIndustryIds: details?.articleIndustrys?.map((item) => item.value),
          articleLabels: details?.articleLabels,
          articleSetDate: details?.articleSetDate,
          articleLocation: details?.articleLocation,
          articleHighlight: details?.articleHighlight,
          contacts: details?.contacts,
          articleContent: details?.articleContent,
          articleAttachments: articleAttachments,
          createdSource: details?.createdSource,
        });

        if (response.code === 0) {
          message.success('提交成功');
          onSubmit();
          return true;
        } else {
          return false;
        }
      }}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details === undefined}
      >
        <Descriptions>
          <Descriptions.Item label="选题计划">{details?.topicName}</Descriptions.Item>
        </Descriptions>
        <Descriptions>
          <Descriptions.Item label="报送单位">
            {initialState?.currentUser?.organizationName}
          </Descriptions.Item>
          <Descriptions.Item label="报送人">{initialState?.currentUser?.name}</Descriptions.Item>
          <Descriptions.Item label="联系方式">{initialState?.currentUser?.phone}</Descriptions.Item>
        </Descriptions>
        <Descriptions>
          <Descriptions.Item label="选题方向">
            <Space size={[0, 8]} wrap>
              {details?.articleIndustrys?.map((item) => {
                return <Tag key={item.value}>{item.label}</Tag>;
              })}
            </Space>
          </Descriptions.Item>
        </Descriptions>
        <Descriptions>
          <Descriptions.Item label="标签">
            <Space size={[0, 8]} wrap>
              {details?.articleLabels?.map((item) => {
                return <Tag key={item}>{item}</Tag>;
              })}
            </Space>
          </Descriptions.Item>
        </Descriptions>

        {details?.articleSetDate && (
          <Descriptions column={3}>
            <Descriptions.Item label="线索日期">{details?.articleSetDate}</Descriptions.Item>
          </Descriptions>
        )}
        {details?.articleLocation && (
          <Descriptions column={3}>
            <Descriptions.Item label="地点">{details?.articleLocation}</Descriptions.Item>
          </Descriptions>
        )}
        {details?.articleHighlight && (
          <Descriptions column={3}>
            <Descriptions.Item label="亮点">{details?.articleHighlight}</Descriptions.Item>
          </Descriptions>
        )}

        <Descriptions>
          <Descriptions.Item span={3} label="联络方式">
            <Space size={[8, 16]} wrap>
              {details?.contacts &&
                details?.contacts.map((item) => (
                  <span style={{ marginRight: 5 }}>
                    <a>{item.name}</a> - <a>{item.phone}</a>
                  </span>
                ))}
            </Space>
          </Descriptions.Item>
        </Descriptions>

        <Divider />

        {details?.articleName ? (
          <Typography.Title level={3} style={{ textAlign: 'center' }}>
            {details?.articleName}
          </Typography.Title>
        ) : (
          <Typography.Title level={3} style={{ textAlign: 'center' }}>
            请填写标题
          </Typography.Title>
        )}

        <br />
        {details?.articleContent ? (
          <div
            dangerouslySetInnerHTML={{
              __html: `${details?.articleContent}`,
            }}
          />
        ) : (
          <>请填写在线索内容</>
        )}
        {details?.articleAttachments && details?.articleAttachments.length > 0 && (
          <>
            <Divider />

            <Upload
              listType="picture"
              multiple
              fileList={details?.articleAttachments.map((item) => {
                return {
                  uid: item.id,
                  name: item.name,
                  url: item.thumbUrl,
                  status: 'done',
                };
              })}
              showUploadList={{
                downloadIcon: false,
                showRemoveIcon: false,
                showDownloadIcon: false,
              }}
              onPreview={handlePreview}
            />
            <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
              <Image width="100%" src={previewImage} />
            </Modal>
          </>
        )}
      </Spin>
    </DrawerForm>
  );
};

export default AddSubmitPreview;
